import React, { useEffect } from 'react'
import Image from 'next/image'
import Avatar from '@mui/material/Avatar'
import { GetServerSideProps } from 'next/types'

import {
  AboutMePageWrap,
  ContentWrap,
  ProfileHeader,
  TopCard,
} from '@/components/pages/me/styled'
import profileBg from '@/assets/images/profileBg.jpg'
import avatar from '@/assets/images/defaultAvatar.jpeg'
import settings from '@/settings'
import { getAbout } from '@/api/about'
import { setPageTitle } from '@/utils'
import { AppLayout } from '@/layout'
import MarkdownRenderer from '@/components/MarkdownRenderer'

function MePage({ data }) {
  useEffect(() => {
    setPageTitle('关于我')
  }, [])

  return (
    <AppLayout>
      <AboutMePageWrap>
        <TopCard>
          <div className="picture-main">
            <Image
              src={profileBg}
              alt="profile background"
              layout="fill"
              className="profile-img"
              priority
            />
          </div>
          <ProfileHeader>
            <div className="avatar-main">
              <Avatar
                src={settings.avatar && avatar}
                sx={{ width: 128, height: 128 }}
              />
            </div>
            <div className="info-main">
              <div className="info-main-item" />
              <div className="info-main-content info-main-item">
                <div className="info-name info-item">{settings.author}</div>
                <div className="info-intro info-item bp3-text-muted">
                  {settings.intro}
                </div>
              </div>
            </div>
          </ProfileHeader>
        </TopCard>
        <ContentWrap>
          <div className="title-main">
            <h2>{data.title}</h2>
          </div>
          <div className="about-main">
            <div className="about-content ">
              <MarkdownRenderer content={data.content} />
            </div>
          </div>
        </ContentWrap>
      </AboutMePageWrap>
    </AppLayout>
  )
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const res = await getAbout()
  const { data } = res
  return {
    props: {
      data,
    },
  }
}

export default MePage
